<template>
	<div class="login-vue" :style="bg">

		<div class="container">

			<el-form label-position="right" :model="logindata" :rules="rules" ref="ruleForm">
				<el-form-item>
					<h1 class="login-title">欢迎登录</h1>
				</el-form-item>

				<el-form-item prop="userName">
					<el-input class="login-inputorbuttom" prefix-icon="el-icon-user" placeholder="登录名"
						v-model="logindata.userName" @keyup.enter.native="loginButton"></el-input>
				</el-form-item>

				<el-form-item prop="password">
					<el-input prefix-icon="el-icon-lock" placeholder="密码" type="password" v-model="logindata.password"
						@keyup.enter.native="loginButton"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button  class="full-width-button" type="primary" :loading="logining" v-popover:popover @click="loginButton">登 录</el-button>
				</el-form-item>

			</el-form>
		</div>


		<!--验证码弹窗-->
		<el-popover popper-class="slidingPictures" ref="popover" trigger="manual" v-model="visible">
			<div class="sliding-pictures">
				<VerificationComponent ref="verificationImg" @closePupUp="closePupUp" @login="login" />
				<div class="operation">
					<span title="关闭验证码" @click="closePupUp" class="el-icon-circle-close"></span>
					<span title="刷新验证码" @click="canvasInit" class="el-icon-refresh-left"></span>
				</div>
			</div>
		</el-popover>
	</div>
</template>

<script>
	import {
		dologin
	} from '@/api/system/login';
	import {
		encrypt,
		decrypt
	} from '../utils/sm2.js';
	import VerificationComponent from "./VerificationComponent";
	export default {
		components: {
			VerificationComponent,
		},
		data() {
			return {
				logining: false,
				logindata: {
					userName: "admin",
					password: "19951002",
					verificationCode: "",
				},
				rules: {
					userName: [{
						required: true,
						message: "请填写密码"
					}],
					password: [{
						required: true,
						message: "请填写密码"
					}],
				},
				visible: false, //弹窗开启关闭

				//拼图是否正确
				puzzle: false,
				bg: {},
			};
		},
		watch: {
			visible(e) {
				if (e === true) {
					// 初始化拼图
					this.$refs.verificationImg.Event_initImg();
					this.puzzle = false;
				}
			},
		},
		mounted() {},
		created() {
			this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg06.jpg') + ')'
		},
		methods: {
			// 登录按钮
			loginButton() {
				this.visible = true; // 显示验证码弹窗

			},

			//刷新拼图验证码
			canvasInit() {
				this.$refs.verificationImg.Event_restImg();
			},
			// 关闭验证码
			closePupUp() {
				this.visible = false;
			},

			// 注册
			jumpPage() {},
			// 登录
			login() {
				this.logining = true;
				if (this.logindata.userName != "" && this.logindata.pwd != "") {
					dologin({
							userName: this.logindata.userName,
							password: encrypt(this.logindata.password)
						})
						.then((res) => {
							if (res.code == 200) {
								localStorage.setItem('tag', res.data.tag)
								localStorage.setItem('token', res.data.tokenValue)
								this.logining = false
								this.$router.push({
									path: this.redirect || '/'
								})
							} else {
								this.logining = false
							}
						})
				} else {
					this.logining = false
					this.$message({
						message: '账号-密码，不能为空',
						type: 'error'
					});

				}
			},
		},
	};
</script>


<style>
	.full-width-button {
	    display: block;
	    width: 100%;
	}
	.login-vue {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.login-vue .container {
		background: rgba(255, 255, 255, .1);
		width: 300px;
		text-align: center;
		border-radius: 10px;
		padding: 30px;
	}

	.login-vue .ivu-input {
		background-color: transparent;
		color: #fff;
		outline: #fff;
		border-color: #fff;
	}

	.login-vue ::-webkit-input-placeholder {
		/* WebKit, Blink, Edge */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue :-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue ::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue :-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: rgba(255, 255, 255, .8);
	}

	.login-vue .title {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.login-vue .input-c {
		margin: auto;
		width: 200px;
	}

	.login-vue .error {
		color: red;
		text-align: left;
		margin: 5px auto;
		font-size: 12px;
		padding-left: 30px;
		height: 20px;
	}

	.login-vue .submit {
		width: 200px;
	}

	.login-vue .account {
		margin-top: 30px;
	}

	.login-vue .account span {
		cursor: pointer;
	}

	.login-vue .ivu-icon {
		color: #eee;
	}

	.login-vue .ivu-icon-ios-close-circle {
		color: #777;
	}



	/* .container {
		background: rgba(255, 255, 255, .1);
		width: 300px;
		text-align: center;
		border-radius: 10px;
		padding: 30px;
	}
	
	.content {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
 */


	/*该样式最终是以弹窗插入*/
	.sliding-pictures {
		width: 100%;

		.operation {
			width: 100%;
			height: 40px;

			>span {
				color: #9fa3ac;
				display: inline-block;
				width: 40px;
				font-size: 25px;
				line-height: 40px;
				text-align: center;

				&:hover {
					background: #e2e8f5;
				}
			}
		}
	}
</style>